<template>
  <div>
    <el-row :gutter="10">
      <el-col :span="6">
        <el-button type="primary" size="mini" @click="handleSelection"
          >获取选中的行</el-button
        >
      </el-col>
    </el-row>
    <!-- selection-change element自带的事件，事件的回调函数的参数value就是选中的行的数据 -->
    <el-table
      border
      stripe
      height="450"
      :data="tableData"
      style="width: 100%"
      ref="bable"
      @selection-change="handleSelectionChange"
    >
      <el-table-column header-align="center" align="center" type="selection">
      </el-table-column>
      <el-table-column
        header-align="center"
        align="center"
        type="index"
        label="序号"
      >
      </el-table-column>
      <el-table-column prop="date" label="日期" width="180px">
      </el-table-column>

      <el-table-column prop="name" label="姓名" width="180px">
      </el-table-column>

      <el-table-column prop="address" label="地址" width="180px">
      </el-table-column>

      <el-table-column header-align="center" align="center" label="操作">
          <!-- slot-scope="scope" slot-scope是element自带的属性，通过这个属性值scope, 得到scope.row作为点击事件中回调函数的参数，在函数中打印这个参数就是选中的行-->
        <template slot-scope="scope">
          <el-button type="primary" icon="el-icon-edit" size="mini"
            >更新</el-button
          >
          <el-button
            type="danger"
            icon="el-icon-delete"
            size="mini"
            @click="handleRemove(scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-button type="primary" @click="handleLoading">显示加载特效，1秒后自动关闭</el-button>
  </div>
</template>

<script>
export default {
  methods: {
    handleRemove(u) {
    //   这里打印的参数就是scope.row，就是当前的行的数据

      console.log(u);
    },
    handleSelection() {
      console.log(this.selections);
    },
    handleSelectionChange(value) {
      //得到的value就是选中的数据，selections是在data中自己定义的，这一步给selections赋值为value
      //   console.log(value);
      this.selections = value;
    },
    handleLoading(){
        var loading=this.$loading({
            lock:true, // 锁定屏幕滚动
            text:"拼命加载中",// 提示文字
            spinner:"el-icon-loading",//加载图标
            background:'rgba(0,0,0,0.7)' //背景色
        });
        setTimeout(()=>loading.close(),500)
        
    }
  },
  data() {
    return {
      selections: [],
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
        },
      ],
    };
  },
};
</script>

<style>
</style>